<template>
  <div class="x-image" >
      <div v-for="(item,index) in value" :key="index" class="imgboxs" :style="{width: width}">
        <el-image class="imgitme" :src="item" :preview-src-list="[item]"></el-image>
      </div>
  </div>
</template>

<script>
export default {
  name: 'x-image',
  props: {
    value: [String, Array],
    width: {
      type: String
      // default: '50%',

    }
  },
  data () {
    return {
      // value:[]
    }
  }

}
</script>
<style>
.x-image{
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow: hidden;
}
.imgboxs{
    margin-right: 5px;
    width: 45px;
    height: 45px;
}
.imgitme{
    width: 100%;
    height: 100%;
    background-size: cover;
}
</style>
